<script setup lang="ts">
import VirtualList from './components/VirtualList.vue'
import Mock from 'mockjs'
type Datas = {
  id:number,
  value:string
}
let mockDatas: Datas[] = [];
for (let i = 0; i < 1000; i++) {
  mockDatas.push({ id: i, value: Mock.Random.sentence(50,200) });
}
</script>

<template>
  <div class="wrapper">
    <virtual-list :datas="mockDatas" :size="40" :remain="20" variable>
      <template v-slot="{_}">
        <div class="item">
          {{ _.value }}
        </div>
      </template>
    </virtual-list>
  </div>
</template>
<style scoped>
.wrapper{
  border: 2px solid red;
  box-sizing: border-box;
}
.item{
  /* height: 40px; */
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
</style>

